<template>
	<view>
		<view v-if="type=='select'" @click="showShadow" class="dropWrap">
			<input type="text" :value="value" disabled />
			<u-icon v-if="showIf" name="arrow-up" color="#999999" size="28"></u-icon>
			<u-icon v-else name="arrow-down" color="#999999" size="28"></u-icon>
		</view>
		<view v-if="type=='buttom'" @click="showShadow" class="dropWrap dropWrap-icon">
			<u-icon name="more-dot-fill" color="#606060" size="40"></u-icon>
		</view>
		<scroll-view scroll-y="true" class="dropdown" :class="type=='select'?'':'dropdown-icon'"
			:style="{maxHeight:height=='auto'?'auto': height+ 'rpx'}" v-if="showIf">
			<view :class="showIf ? 'dropdown-mask' : 'undropdown-mask'" @click="hideShadow"></view>
			<!-- <view class="ul" :style="showIf?'height:'+list.length*30+'px':''"> -->
			<view class="ul" :style="'--i:'+list.length" :class="showIf?'show':''">
				<!-- 不支持就用上面那种 -->
				<view class="li" :class="value==item.value?'active':''" v-for="(item, index) in list" :key="index"
					@click="handlerItem(index)">{{ item.value }}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'dropdown',
		props: ['default', 'list', 'type', 'cid', 'height'],
		created() {
			if (this.type == 'select') {
				this.value = this.default ? this.default : '请选择';
			}
		},
		data() {
			return {
				showIf: false,
				value: '请选择'
			};
		},
		methods: {
			handlerItem(index) {
				this.showIf = false;
				this.value = this.list[index].value;
				let obj = {
					type: this.type,
					id: this.cid,
					select: this.list[index]
				}
				this.$emit('handle', obj);
			},
			hideShadow() {
				this.showIf = false;
			},
			showShadow() {
				this.showIf = true;
			}
		}
	};
</script>

<style scoped lang="scss" scoped>
	.dropWrap {
		box-sizing: border-box;
		height: 60rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10rpx;

		input {
			width: 90%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.dropWrap-icon {
		width: 30rpx;
		border: none;
		padding: 0;
	}

	.dropdown {
		position: absolute;
		top: 70rpx;
		right: 0;
		z-index: 100;
		width: 200rpx;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		background: #fff;

		.ul {
			width: 100%;
			position: relative;
			z-index: 101;
			list-style: none;
			background-color: #fff;
			border-radius: 4rpx;
			padding-left: 0;
			transition: all 0.2s;
			height: 0;
			overflow: hidden;

			.li {
				box-sizing: border-box;
				color: #737373;
				height: 60rpx;
				// border-bottom: 1px solid #e6eaeb;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 60rpx; //与下面的高度保持一致
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.li:last-child {
				border-bottom: none;
			}

			.li.active {
				background: #30A1FF;
				color: #fff;
			}
		}

		.show {
			height: calc(var(--i) * 60rpx); //与上面的高度保持一致
		}

		.dropdown-mask {
			top: 0;
			left: 0;
			position: fixed;
			width: 100vw;
			height: 100vh;
			z-index: 100;
			pointer-events: auto;
		}

		.undropdown-mask {
			pointer-events: none;
		}
	}

	.dropdown-icon {
		top: 60rpx;
		right: 0;
	}

	::-webkit-input-placeholder {
		color: #c0c4cc;
	}

	::-moz-placeholder {
		color: #c0c4cc;
	}

	/* firefox 19+ */
	:-ms-input-placeholder {
		color: #c0c4cc;
	}

	/* ie */
	input:-moz-placeholder {
		color: #c0c4cc;
	}
</style>
